<template>
  <!-- 面包屑 -->
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>
      <a href="/">基础数据</a>
    </el-breadcrumb-item>
    <el-breadcrumb-item>网格人员设置</el-breadcrumb-item>
  </el-breadcrumb>
  <!-- 搜索区 -->
  <div style="height: 120px; padding: 10px; margin-top: 10px; border: 1px black solid;">
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="部门名称">
        <el-input v-model="searchForm.DepartName" placeholder="部门名称" clearable />
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="searchForm.AccountNickname" placeholder="名称" clearable />
      </el-form-item>
      <br>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button> <el-button type="danger"
          @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div style="height: 580px; padding: 10px; margin-top: 10px; border: 1px black solid;">
    <el-button type="success" @click="openDialog(null)">添加</el-button>
    <el-table :data="tableData" style="width: 100%; margin-top: 10px;">
      <!-- <el-table-column prop="roleId" label="角色id"   />
      <el-table-column prop="departmentId" label="部门id"  /> -->
      <el-table-column prop="id" label="账号编号" />
      <el-table-column prop="accountName" label="账号" />
      <el-table-column prop="accountNickname" label="姓名" />
      <el-table-column prop="accountPhone" label="联系电话" />
      <el-table-column prop="accountCard" label="身份证号" />
      <el-table-column prop="roleName" label="角色" />
      <el-table-column prop="departmentName" label="所属部门" />
      <el-table-column fixed="right" min-width="150px" label="操作">
        <template v-slot="rowdata">
          <el-button type="danger" size="small" @click='delData(rowdata.row)'
            v-if="rowdata.row.roleName != '系统管理员' && rowdata.row.roleName != '超级管理员'">
            删除
          </el-button>
          <el-button type="primary" size="small" @click="openDialog(rowdata.row)"
            v-if="rowdata.row.roleName != '系统管理员' && rowdata.row.roleName != '超级管理员'">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <el-dialog v-model="form.isOpen" title="添加网格人员" width="500">
    <el-form :model="form">
      <el-form-item label="选择部门">
        <el-cascader v-model="form.departmentId" style="width: 380px;" :options="options" :props="props"
          @change="handleChange" />
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="form.accountNickname" style="width: 380px;" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="身份证号">
        <el-input v-model="form.accountCard" style="width: 380px;" placeholder="请输入证件号" />
      </el-form-item>

      <el-form-item label="联系方法">
        <el-input v-model="form.accountPhone" style="width: 380px;" placeholder="请输入手机号" />
      </el-form-item>
      <el-form-item label="账号">
        <el-input v-model="form.accountName" style="width: 380px;" placeholder="默认手机号" />
      </el-form-item>


      <el-form-item label="角色" :label-width="formLabelWidth">
        <el-select v-model="form.roleId" placeholder="请选择角色">
          <el-option label="网格长" :value=2 />
          <el-option label="网格员" :value=3 />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="form.isOpen = false">取消</el-button>
        <el-button type="primary" @click="saveData"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script setup>
//import 区
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus';
import { id } from 'element-plus/es/locale/index.js';
//搜索区
const searchForm = reactive({
  DepartName: '',
  AccountNickname: ''
})
const search = () => {
  getData();
}
const openDialog = (row) => {
  if (row == null) {//添加
    getOptions();
    form.isOpen = true;
    form.isAdd = true

  } else {//编辑
    form.isAdd = false
    console.log(row)
    getOptions();
    form.departmentId = row.departmentId
    form.accountCard = row.accountCard
    form.accountName = row.accountName
    form.accountNickname = row.accountNickname
    form.accountPhone = row.accountPhone
    form.roleId = row.roleId
    form.id = row.id //编辑时,反填id
    form.isOpen = true
  }
}

//table 区
const tableData = ref([]);
const getData = () => {//调用后端的GetAccountsWithDepart接口 ,把接口的Data.data赋值给table表格双向绑定的变量  tableData
  axios.get('https://localhost:7016/api/Account/GetAccountsWithDepart', { params: searchForm })
    .then((res) => {
      console.log(res)
      tableData.value = res.data.data;//调用后端的GetAccountsWithDepart接口 ,把接口的Data.data赋值给table表格双向绑定的变量  tableData
    })
}

//table-删除
const delData = (row) => {
  console.log(row)
  let id = row.id
  axios.put('https://localhost:7079/api/Account/DelAccount', row).then((res) => {
    console.log(res)
    if (res.data.code == 200) {
      ElMessage.success("删除成功");
      getData();
    } else {
      ElMessage.error("删除失败");
    }
  })
}

//对话框区
const form = reactive({
  isOpen: false,
  isAdd: false,
  "accountName": "",
  "accountPass": "",
  "accountNickname": "",
  "accountPhone": "",
  "accountCard": "",
  "roleId": null,
  "departmentId": 0,
  id:0
})


//对话框 保存
const saveData = () => {
  if (form.isAdd) {
    axios.post('https://localhost:7079/api/Account/CreateAccount', form).then((res) => {
      console.log(res)
      if (res.data.code == 200) {
        ElMessage.success(res.data.msg);
        getData();
        form.isOpen = false;
      } else {
        ElMessage.error(res.data.msg);
      }
    })
  }else{
    //
    axios.put('https://localhost:7079/api/Account/UpdateAccount', form).then((res) => {
      console.log(res)
      if (res.data.code == 200) {
        ElMessage.success(res.data.msg);
        getData();
        form.isOpen = false;
      } else {
        ElMessage.error(res.data.msg);
      }
    })

  }
}

//对话框-级联
const options = ref([]);
const getOptions = () => {//调用后端的接口,获取部门的级联数据结构
  axios.get('https://localhost:7016/api/DepartMent/GetDepartmentJL')
    .then(res => {
      console.log(res)
      options.value = res.data.data;
    })

}
const props = {//修改级联选择器里默认的字段名
  label: 'departmentName',
  value: 'id',
  children: 'childrens'

};
const handleChange = (value) => {
  var length = value.length;
  form.departmentId = value[length - 1];
}


onMounted(() => {
  getData();
});


</script>

<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>